<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="1046px"
      title="详情"
      wrapClassName="modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <a-row :gutter="0">
          <a-form-model ref="form" :model="form">
            <!-- 水泥、水泥混凝土、砂浆、无机结合料、水泥净浆、压浆材料 -->
            <a-row
              :gutter="0"
              v-if="
                trialNum == $trialNum.SN ||
                trialNum == $trialNum.SNHNT ||
                trialNum == $trialNum.SJ ||
                trialNum == $trialNum.WJJHL ||
                trialNum == $trialNum.SNJJ ||
                trialNum == $trialNum.YJCL
              "
            >
              <a-col :span="12" v-if="modalTrialNum.includes('KYQD')">
                <a-form-model-item
                  label="抗压强度代表值(MPa)"
                  class="large-label"
                >
                  <a-input v-model="form.typicalValue" disabled></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12" v-if="modalTrialNum.includes('KZQD')">
                <a-form-model-item label="抗折强度代表值(MPa)">
                  <a-input v-model="form.typicalValue2" disabled></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <div v-for="(item, index) in dataList" :key="index">
              <!-- 水泥混凝土、砂浆、无机结合料 -->
              <a-divider
                orientation="left"
                v-if="
                  trialNum == $trialNum.SNHNT ||
                  trialNum == $trialNum.SJ ||
                  trialNum == $trialNum.WJJHL
                "
              >
                试块{{ index + 1 }}
              </a-divider>
              <!--  水泥、水泥混凝土、砂浆、无机结合料、水泥净浆、压浆材料 -->
              <a-col
                :span="12"
                v-if="
                  (trialNum == $trialNum.SN ||
                    trialNum == $trialNum.SNHNT ||
                    trialNum == $trialNum.SJ ||
                    trialNum == $trialNum.SNJJ ||
                    trialNum == $trialNum.YJCL ||
                    trialNum == $trialNum.WJJHL) &&
                  modalTrialNum.includes('KYQD')
                "
              >
                <a-form-model-item label="抗压荷载(kN)">
                  <a-input v-model="item.kyhz" disabled></a-input>
                </a-form-model-item>
              </a-col>
              <a-col
                :span="12"
                v-if="
                  (trialNum == $trialNum.SN ||
                    trialNum == $trialNum.SNHNT ||
                    trialNum == $trialNum.SJ ||
                    trialNum == $trialNum.SNJJ ||
                    trialNum == $trialNum.WJJHL ||
                    trialNum == $trialNum.YJCL) &&
                  modalTrialNum.includes('KYQD')
                "
              >
                <a-form-model-item label="抗压强度(MPa)">
                  <a-input v-model="item.kyqd" disabled></a-input>
                </a-form-model-item>
              </a-col>
              <div
                class="echart"
                ref="chart-dom"
                :id="'chart-dom' + '-' + index"
                v-if="
                  modalTrialNum.includes('KL') || modalTrialNum.includes('KYQD')
                "
              ></div>
            </div>
          </a-form-model>
        </a-row>
      </div>
      <div class="modal-footer">
        <a-button type="default" @click="closeModal()">取消 </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getDetailAuto } from "@/api/wisdom-beam/trial-app";
export default {
  props: ["visible", "modalTrialNum", "id", "parentTrialNum"],
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          let trialNum = this.parentTrialNum;
          if (trialNum == this.$trialNum.LQWL) {
            this.trialNum = this.modalTrialNum;
          } else {
            this.trialNum = trialNum;
          }
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {},
      dataList: [],
      trialNum: "",
      kyList: [],
      kzList: [],
    };
  },
  methods: {
    getDetail() {
      getDetailAuto({ id: this.id, trialNum: this.modalTrialNum })
        .then((res) => {
          let { data } = res;
          this.form = data?.result || {};
          let { SNHNT } = this.$trialNum;
          if (SNHNT) {
            this.dataList = this.form?.dataList || [];
            this.dataList.forEach((item, index) => {
              this.$nextTick((_) => {
                setTimeout((_) => {
                  this.getInitChar(
                    "chart-dom" + "-" + index,
                    item.x,
                    item.y,
                    item.unit
                  );
                }, 100);
              });
            });
          }
        })
        .catch();
    },
    //加载echarts图表
    getInitChar(chart_dom, x, y, unit) {
      let chartInstance = this.$echarts.init(
        document.getElementById(chart_dom)
      );
      let baseOpt = {
        color: ["#5998FE", "#F8AB55"],
        grid: {
          left: "5%",
          right: "8%",
          bottom: "10%",
          top: "25%",
          containLabel: true,
        },
        legend: {
          show: false,
          top: "48%",
          icon: "rect",
          itemWidth: 16,
          itemHeight: 9,
          textStyle: {
            color: "#8c8c8c",
          },
        },
        tooltip: {
          trigger: "axis",
          padding: [10, 10],
          axisPointer: {
            type: "cross",
          },
          borderColor: "rgba(112, 119, 242, 0.8)",
          borderWidth: 1,
          formatter: function (params, ticket, callback) {
            return `时间：${params[0].axisValue}${unit} 力值：${params[0].value}`;
          },
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
            height: 10,
            fillerColor: "rgba(167,183,204,0.4)",
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            handleStyle: {
              color: "#fff",
              borderColor: "rgba(0, 0, 0, 0.2)",
              shadowBlur: 3,
              shadowColor: "rgba(0, 0, 0, 0.6)",
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            bottom: "10px",
          },
        ],
        xAxis: [
          {
            type: "category",
            name: "时间" + "（" + unit + "）",
            boundaryGap: false,
            data: x,
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000",
              },
            },
            splitLine: {
              show: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "力值（kN）",
            splitNumber: 4,
            scale: true,
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000",
              },
            },
            splitLine: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "时间",
            type: "line",
            symbolSize: 10,
            symbol: "circle",
            showSymbol: false,
            smooth: false,
            itemStyle: {
              normal: {
                color: "rgba(167, 181, 230, 1)",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: "rgba(167, 181, 230, 0.7)",
                shadowBlur: 5,
              },
            },
            data: y,
          },
        ],
      };
      chartInstance.setOption(baseOpt);
      window.onresize = function () {
        chartInstance.resize();
      };
    },
    //关闭弹框
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
//弹框样式
/deep/.modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .curve-modal-body {
    padding: 20px;
    max-height: 600px;
    .custom-scrollbar();
    .card-view-container {
      padding-bottom: 0;
      font-size: 18px;
      .gzd-button {
        width: 96px;
        height: 36px;
        background: #ffffff;
        border: 1px solid var(--primary-color);
        border-radius: 2px;
        color: var(--primary-color);
        text-align: center;
        line-height: 36px;
        position: absolute;
        top: 9px;
        right: 20px;
      }
    }

    .echart {
      height: 260px;
      width: 100%;
    }
  }
  .modal-footer {
    padding-bottom: 20px;
    text-align: center;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item {
    display: flex;
    &.large-label {
      .ant-form-item-label {
        width: 154px;
      }
    }
    .ant-form-item-label {
      width: 140px;
      white-space: pre-wrap;
      display: flex;
      justify-content: flex-end;
      line-height: 20px;
      align-items: center;
      margin-right: 15px;
      height: 36px;
      label {
        color: #999999;
      }
    }
    .check-item-select {
      height: 86px;
      .ant-select-selection__rendered {
        height: 86px;
        .ant-select-selection__placeholder {
          margin-top: -40px !important;
        }
      }
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
  //上传图片
  .picture-img {
    display: flex;
    flex-wrap: wrap;
    img {
      margin-right: 24px;
      margin-bottom: 10px;
      width: 168px;
      height: 162px;
      border-radius: 2px;
      object-fit: cover;
    }
    .ant-upload-picture-card-wrapper {
      width: 168px;
      height: 162px;
      .ant-upload.ant-upload-select-picture-card {
        height: 100%;
        width: 100%;
      }
    }
    .card {
      position: relative;
      .del-icon {
        cursor: pointer;
        font-size: 20px;
        position: absolute;
        right: 10px;
        top: -10px;
        color: #ff6565;
      }
    }
  }
  .ant-checkbox-inner {
    border-radius: 50%;
  }
  //原因分析
  .ant-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    .ant-checkbox-wrapper {
      padding: 0 10px;
      width: 110px;
      height: 36px;
      background: #ffffff;
      border: 1px solid var(--primary-color);
      border-radius: 4px;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: center;
      margin-left: 0;
      margin-right: 15px;
      margin-bottom: 10px;
    }
  }
}
.kl {
  /deep/.ant-form-item {
    margin-bottom: 0px;
  }
}

/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
</style>
